<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/basket.js"></script>
    <script src="../js/rsvp.min.js"></script>
</head>
<body>

</body>
<script>
    /**
     * 说明:
     * 1. 使用这种方式加载js后会被浏览器缓存, 下一次加载将不需要从服务器上加载, 直接从浏览器缓存中获取;
     * 2. 可以一次加载多个js文件;
     */
    basket.require(
        {url: "../js/jquery-3.4.1.js", key: "jquery"},
        {url: "../js/lodash.js"},
        {url: "../js/qs.min.js", skipCache: true},  // skipCache属性将会控制不使用localStore中的缓存;
        {url: "../js/sweetalert2.js", expire: 2},   // expire属性用于控制缓存的有效时间, 单位为小时;
        {url: "../js/moment.js", unique: "v1.2"},   // unique属性会将值拼接到url中, 当该值变化时将会重新从服务端取, 不变化则从缓存取
        {url: "../js/axios.min.js", key: "axios"}   // key属性会控制localStore中的缓存的key名称, 如果不设置, 将会以url作为key
    );

    /**
     * 说明:
     * 1. 可以给是否加载好js设置回调, then方法的第一个函数是成功回调, 第二个是失败回调;
     */
    basket.require(
        {url: "../js/bootstrap1.js"}
    ).then(function () {
        console.log("load bootstrap.js success");
    }, function (error) {
        console.log("load bootstrap.js fail: " + error);
    })

    /**
     * 说明:
     * 1. get方法用于通过key属性设置到localStore中的缓存对象;
     */
    let axiosObj = basket.get("axios");
    console.log(axiosObj.expire - axiosObj.stamp);

    /**
     * 说明:
     * 1. remove方法将会删除localStore中的缓存;
     */
    basket.remove("axios")
        .remove("jquery");

    // 删除缓存后, get方法将获取不到对象;
    axiosObj = basket.get("axios");

    // 如果传入参数true则只清空过期缓存, 不传任何参数将会清空所有缓存;
    basket.clear(true);

</script>
</html>